<template>
  <div>
    <button @click="comName = 'QrCode'">二维码登录</button>
    <button @click="comName='UserName' ">账号密码登录</button>
    <button @click="comName='PhoneLogin' ">手机验证码登录</button>

    <div class="box">
      <!-- <qr-code v-if="comName == 'QrCode'" />
      <user-name v-else-if="comName == 'UserName'"/>
      <phone-login v-else-if="comName == 'PhoneLogin'"/> -->

      <!-- 写component的这个没有写死 -->
      <!-- 根据comName这个变量来，comName是哪个组件名，这里就显示哪个组件 -->
      <keep-alive>
        <component :is="comName" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import QrCode from './components/QrCode'
import UserName from './components/UserName'
import PhoneLogin from './components/PhoneLogin'
export default {
  components: {
    QrCode,
    UserName,
    PhoneLogin
  },
  data() {
    return {
      comName: 'QrCode'
    }
  },
}
</script>

<style>
  .box {
    width: 600px;
    height: 400px;
    border: 1px solid #000;
  }
</style>